﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

    <script type="text/javascript">
    var map, currentAnimation;

    var path = [
        new Microsoft.Maps.Location(42.8, 12.49),   //Italy
        new Microsoft.Maps.Location(51.5, 0),       //London
        new Microsoft.Maps.Location(40.8, -73.8),   //New York
        new Microsoft.Maps.Location(47.6, -122.3)   //Seattle
    ];

	function GetMap()
	{
		map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
		    credentials: "YOUR_BING_MAPS_KEY"
		});

	    //Register and load the Animation Module
		Microsoft.Maps.registerModule("AnimationModule", "js/AnimationModule.js");
		Microsoft.Maps.loadModule("AnimationModule");
	}

	function ClearMap() {
	    map.entities.clear();

	    if (currentAnimation != null) {
	        currentAnimation.stop();
	        currentAnimation = null;
	    }
	}

	function DropPin() {
	    ClearMap();

	    var pin = new Microsoft.Maps.Pushpin(map.getCenter());
	    map.entities.push(pin);

	    Bing.Maps.Animations.PushpinAnimations.Drop(pin);
	}

	function BouncePin() {
	    ClearMap();

	    var pin = new Microsoft.Maps.Pushpin(map.getCenter());
	    map.entities.push(pin);

	    Bing.Maps.Animations.PushpinAnimations.Bounce(pin);
	}

	function Bounce4Pins() {
	    ClearMap();

	    var idx = 0;

	    for (var i = 0; i < path.length; i++) {
	        setTimeout(function () {
	            var pin = new Microsoft.Maps.Pushpin(path[idx]);
	            map.entities.push(pin);
	            
	            Bing.Maps.Animations.PushpinAnimations.Bounce(pin);
	            idx++;
	        }, i * 500);
	    }	   
	}

	function MovePinOnPath(isGeodesic) {
	    ClearMap();

	    var pin = new Microsoft.Maps.Pushpin(path[0]);
	    map.entities.push(pin);

	    currentAnimation = new Bing.Maps.Animations.PathAnimation(path, function (coord) {
	        pin.setLocation(coord);
	    }, isGeodesic, 40000);

	    currentAnimation.play();
	}

	function MoveMapOnPath(isGeodesic) {
	    ClearMap();

        //Change zooms levels as map reaches points along path.
	    var zooms = [5, 4, 6, 5];

	    map.setView({ center: path[0], zoom: zooms[0] });

	    currentAnimation = new Bing.Maps.Animations.PathAnimation(path, function (coord, idx) {
	        map.setView({ center: coord, zoom: zooms[idx] });
	    }, isGeodesic, 100000);

	    currentAnimation.play();
	}

	function DrawPath(isGeodesic) {
	    ClearMap();

	    var line;

	    currentAnimation = new Bing.Maps.Animations.PathAnimation(path, function (coord, idx, frameIdx) {
	        if (frameIdx == 1) {
                //Create the line the line after the first frame so that we have two points to work with.
	            line = new Microsoft.Maps.Polyline([path[0], coord]);
	            map.entities.push(line);
	        }
	        else if (frameIdx > 1) {
	            var points = line.getLocations();
	            points.push(coord);
	            line.setLocations(points);           
	        }
	    }, isGeodesic, 40000);

	    currentAnimation.play();
	}
    </script>

    <style type="text/css">
        html, body {
            width:100%;
            height:100%;
            margin:0;
            padding:0;
        }

        #myMap {
            position:relative;
            width:100%;
            height:100%;
        }

        .sidePanel {
            position:absolute;
            right:10px;
            top:200px;
            top:calc(50% - 200px);
            margin:10px;
            width:250px;
            height:400px;
            border-radius:10px;
            background-color:#000;
            background-color:rgba(0,0,0,0.8);
            color:#fff;
            padding:10px;
        }

            .sidePanel input {
                margin:5px 0;
            }
    </style>
</head>
<body onload="GetMap();">
    <div id='myMap'></div>

    <div class="sidePanel">
        <input type="button" value="Clear Map" onclick="ClearMap();" /><br /><br />

        <span>Pushpin Animations</span><br/>
        <input type="button" value="Drop Pin" onclick="DropPin();" /><br />
        <input type="button" value="Bounce Pin" onclick="BouncePin();" /><br />
        <input type="button" value="Bounce 4 Pins After Each Other" onclick="Bounce4Pins();" /><br /><br />
        
        <span>Path Animations</span><br />
        <input type="button" value="Move Pin Along Path" onclick="MovePinOnPath();" /><br />
        <input type="button" value="Move Pin Along Geodesic Path" onclick="MovePinOnPath(true);" /><br />
        <input type="button" value="Move Map Along Path" onclick="MoveMapOnPath();" /><br />
        <input type="button" value="Move Map Along Geodesic Path" onclick="MoveMapOnPath(true);" /><br />
        <input type="button" value="Draw Path" onclick="DrawPath();" /><br />
        <input type="button" value="Draw Geodesic Path" onclick="DrawPath(true);" />
    </div>
</body>
</html>